<template>
    <div class="container">
      <div class="header">
         <p>服务管理协议</p>
         <el-button type="primary" @click="back">返回</el-button>
      </div>
      <div class="main">
        <el-form :model="information" :rules="rules" ref="information" label-width="180px" class="">
          <!-- <div class="sub_title">申请信息</div> -->
          <el-form-item  prop="passportFileKey" label="乐房服务协议">
          <el-upload class="avatar-uploader"
            :http-request="myUpload"  action="" :disabled="disabled"
            :show-file-list="false"
            :before-upload="beforePassportUpload">
            <img v-if="passportUrl" :src="passportUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          </el-form-item>
          <el-form-item  prop="idCardFileKey" label="租房押金须知">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeIdCardUpload">
              <img v-if="idCardUrl" :src="idCardUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="medicalCardFileKey" label="免责声明">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeMedicalCardUpload">
              <img v-if="medicalCardUrl" :src="medicalCardUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="bankTheWaterFileKey" label="新租客清单和注意事项">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeBankTheWaterUpload">
              <img v-if="bankTheWaterUrl" :src="bankTheWaterUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="incomeProofFileKey" label="版权声明">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeIncomeProofUpload">
              <img v-if="incomeProofUrl" :src="incomeProofUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="payrollFileKey" label="新租客申请表">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforePayrollUpload">
              <img v-if="payrollUrl" :src="payrollUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="historicalRentingFileKey" label="知识产权声明">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="historicalRentingUrl" :src="historicalRentingUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="房屋EOI注册兴趣政策">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="隐私保护">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="房屋EOI注册兴趣表">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="点评发布规则">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="房屋预定表">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="房屋守则">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="房屋报价须知">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="住宿旅客意外伤害保险">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="房屋报价表">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="接受飞机须知">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="房屋拍卖须知">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="修改取消政策">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="房屋拍卖注册表">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item  prop="otherFileKey" label="租房政策">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item  prop="otherFileKey" label="关于乐房">
            <el-upload class="avatar-uploader"
              :http-request="myUpload"  action="" :disabled="disabled"
              :show-file-list="false"
              :before-upload="beforeHistoryUpload">
              <img v-if="otherUrl" :src="otherUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item v-if="!disabled">
            <el-button type="primary" @click="submitForm('information')"  :loading="loading">保存</el-button>
            <el-button @click="resetForm('information')">重置</el-button>
            <el-button @click="back">返回</el-button>
          </el-form-item> -->

        </el-form>
      </div>

    </div>


</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
import $ from 'jquery'
  export default {
    data() {
      var validateNumber = (rules,value,callback)=>{
        if(isNaN(value)) {
            callback(new Error('请输入数字值!'));
        }
        else {
            callback();
        }
      }
      return {
        tableData:[],
        loading:true,
        orderCode:'',
        currentPage:1,
        pageIndex:1,
        disabled:false,
        houseTypeUrl:'',
        houseInfo:{},
        //文件图片
        passportUrl:'',
        idCardUrl:'',
        medicalCardUrl:'',
        bankTheWaterUrl:'',
        incomeProofUrl:'',
        payrollUrl:'',
        historicalRentingUrl:'',
        otherUrl:'',
        information: {

        },
        rules: {
            area:[{required: true, message: '请输入套内面积', trigger: 'blur' }],
            landArea:[{required: true, message: '请输入土地面积', trigger: 'blur' }],
            priceLow: [{required: true, message: '请输入最低价格', trigger: 'blur' },{ validator: validateNumber, trigger: 'blur' }],
            priceHigh: [{required: true, message: '请输入最高价格', trigger: 'blur' },{ validator: validateNumber, trigger: 'blur' }],
            parkingCount: [{required: true, message: '请输入停车位数量', trigger: 'blur' },{ validator: validateNumber, trigger: 'blur' }],
            restroomCount: [{required: true, message: '请输入洗手间数量', trigger: 'blur' },{ validator: validateNumber, trigger: 'blur' }],
            roomCount: [{required: true, message: '请输入房间数量', trigger: 'blur' },{ validator: validateNumber, trigger: 'blur' }],
            roomNumber: [{required: true, message: '请输入房间号', trigger: 'blur' },{ validator: validateNumber, trigger: 'blur' }],
            imageFileKey: [{required: true, message: '请上传户型图片', trigger: 'blur' }],
        },
        loading: false
      };
    },
    components:{
        'bg-editor':()=>import('../common/bg-editor.vue')
    },
    mounted() {
        this.currentPage = this.$router.currentRoute.query.currentPage?this.$router.currentRoute.query.currentPage:1;
        this.pageIndex = this.$router.currentRoute.query.pageIndex?this.$router.currentRoute.query.pageIndex:1;
        let sort = this.$router.currentRoute.query.sort?this.$router.currentRoute.query.sort:'edit';
        if(sort == 'edit'){ this.disabled = false;} else{ this.disabled = true;}
        this.orderCode = this.$router.currentRoute.query.orderCode ?this.$router.currentRoute.query.orderCode:'';
        if(this.orderCode){ this.getDetail();};
        // this.getList();
    },
    methods: {
        getProvinceList(){
            common.get(CONSTANT.URL.SYSTEM.LOADDICTIONARY,'province',(res)=>{
                this.provinceList = res.data.bussData?res.data.bussData:[];
            })
        },
        getCityList(e){
            // console.log(e);
            this.information.provinceCode = e;
            for(let item in this.provinceList){
                if(this.provinceList[item].key == e){
                    this.cityList = this.provinceList[item].childs;
                    this.information.cityCode = '';
                    this.information.cityName = ''
                }
            }
        },
        getDetail(){
          let url = CONSTANT.URL.LIST.ORDERLONGDETAIL;
          common.get(url,this.orderCode,(res)=>{
            let data = res.data.bussData;
            this.houseTypeUrl = res.data.bussData.imageUrl;
            this.information = res.data.bussData;
            this.houseInfo = res.data.bussData.rentHouseDTO;
            //可编辑文件
            this.passportUrl = data.passportUrlList[0]?data.passportUrlList[0].fileUrl:'';
            this.payrollUrl = data.payrollUrlList[0]?data.payrollUrlList[0].fileUrl:'';
            this.historicalRentingUrl = data.historicalRentingUrlList[0]?data.historicalRentingUrlList[0].fileUrl:'';
            this.otherUrl = data.otherUrlList[0]?data.otherUrlList[0].fileUrl:'';

            console.log(res.data.bussData);
          })
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
                this.loading = true;
                let url = CONSTANT.URL.LIST.MODELADD;
                common.post(url,this.information, res => {
                    if(res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.loading = false;
                        this.back();

                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.errMsg
                        });
                        this.loading = false;
                    }
                });
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        beforePassportUpload(file){ this.beforeImageUpload(file,1);},
        resetForm(formName) {this.$refs[formName].resetFields();},
        back(){this.$router.push({path:'/longRentApply',query:{currentPage:this.currentPage,pageIndex:this.pageIndex}});},
        myUpload(content) {}, // 重写覆盖上传方法
        beforeImageUpload(file,type) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');return false;}
            let url =
              CONSTANT.URL.SYSTEM.ADMINUPLOADFILE 

            common.formPost(url, {'suffix':file.name.split(".")[1]}, res => { 
                let data = res.data.bussData;
                common.uploadFile(data.uploadUrl,file,file.type,(res)=>{
                    // let item = {};
                    // item.name = data.fileKey;
                    // item.url = data.downloadUrl;
                    // this.fileShowList.push(item);
                    // this.fileListChange();
                    if(type == 1){
                      this.passportUrl = data.downloadUrl;
                      this.information.passportFileKey = data.fileKey;
                    }else if(type == 2){
                      this.idCardUrl = data.downloadUrl;
                      this.information.idCardFileKey = data.fileKey;
                    }else if(type == 3){
                      this.medicalCardUrl = data.downloadUrl;
                      this.information.medicalCardFileKey = data.fileKey;
                    }else if(type == 4){
                      this.bankTheWaterUrl = data.downloadUrl;
                      this.information.bankTheWaterFileKey = data.fileKey;
                    }else if(type == 5){
                      this.incomeProofUrl = data.downloadUrl;
                      this.information.incomeProofFileKey = data.fileKey;
                    }else if(type == 6){
                      this.payrollUrl = data.downloadUrl;
                      this.information.payrollFileKey = data.fileKey;
                    }else if(type == 7){
                      this.historicalRentingUrl = data.downloadUrl;
                      this.information.historicalRentingFileKey = data.fileKey;
                    }else if(type == 8){
                      this.otherUrl = data.downloadUrl;
                      this.information.otherFileKey = data.fileKey;
                    }
                })
            });
        },
        handleImageRemove(file, fileList) { // 图片上传
            // let deleteUrl = file.url;
            this.fileShowList.forEach((item,index)=>{
                if(item.url == file.url){
                    this.fileShowList.splice(index,1);
                }
            })
            this.fileListChange();
        },
        fileListChange(){
            this.information.imageList  = [];
            this.fileShowList.forEach((item,index)=>{
                this.information.imageList.push({fileKey:item.name,fileUrl:item.url});
            });
        },
        beforeEoiUpload(file){this.boforeCoverImageUpload(file,1);},
        beforePolicyUpload(file){this.boforeCoverImageUpload(file,2);},
        boforeCoverImageUpload(file,type){
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');return false;}
           let url =
            CONSTANT.URL.SYSTEM.ADMINUPLOADFILE 

           common.formPost(url, {'suffix':file.name.split(".")[1]}, res => { 
                let data = res.data.bussData;
                common.uploadFile(data.uploadUrl,file,file.type,(res)=>{
                    if(type == 1){
                        this.information.eoiUrl = data.downloadUrl;
                        this.information.eoiFileKey = data.fileKey;
                    }
                    else{
                        this.information.policyUrl = data.downloadUrl;
                        this.information.policyFileKey = data.fileKey;
                    }
                })
            });
        },
    }
  }
</script>
<style lang="scss" scoped>
    .wrap_map{
        padding: 0px 10px 10px 150px;
        min-height:420px;
        background-color: #fff !important;
        margin-bottom: 20px;
        #map{
            width:800px;
            min-height:400px;
        }
    }
    .el-checkbox{ margin-left: 0px;margin-right: 30px;}
</style>
